<template>
  <div class="login-container">
    <div class="login-main">
      <!-- 登录表单 -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login-Form">
        <!-- 表单标题 -->
        <el-row>
          <el-col :span="3">
            <img src="../../assets/loginLogo.png" alt>
          </el-col>
          <el-col :span="9" class="tittle">用户登录</el-col>
          <div class="language">
            <el-tooltip class="item" effect="dark" content="多语言" placement="bottom">
              <el-dropdown trigger="click">
                <el-icon class="hmmm hmmm-language"></el-icon>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item disabled>中文</el-dropdown-item>
                  <el-dropdown-item>English</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-tooltip>
          </div>
        </el-row>
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            show-password
          ></el-input>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button type="primary" :loading="isLoading" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { login } from '@/api/user.js'
import { mapMutations } from 'vuex'
export default {
  name: 'LoginContainer',
  data() {
    return {
      // 登录表单
      loginForm: {
        username: '',
        password: ''
      },
      // 密码加密
      pw: '',
      isLoading: false,
      loginFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    ...mapMutations(['setToken']),
    // 登录
    async onSubmit() {
      this.isLoading = true
      const sha256 = require('js-sha256').sha256 // 这里用的是require方法，所以没用import
      this.pw = sha256(this.loginForm.password)
      // 要加密的密码
      try {
        const { data } = await login({
          username: this.loginForm.username,
          password: this.pw
        })
        this.$store.commit('setToken', data)
        this.$router.push('/')
        this.isLoading = false
      } catch (err) {
        this.$message.error('登录失败')
      }
    }
  },
  created() {},
  mounted() {}
}
</script>

<style lang='less' scoped>
.login-container {
  height: 100%;
  width: 100%;
  background: url('../../assets/bg.jpg') 100% 100%;
  background-size: cover;
  position: relative;
  .login-main {
    height: 100%;
    width: 100%;
    background: url('../../assets/logingBg.png') no-repeat 100% 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    .login-Form {
      position: absolute;
      left: 15%;
      top: 50%;
      transform: translate(0 -50%);
      width: 400px;
      padding: 30px 30px 15px 30px;
      transform: translateY(-50%);
      background: #f5f5f5;
      .el-row {
        padding-bottom: 10px;
        .tittle {
          font-size: 20px;
        }
        .language {
          position: absolute;
          top: 0;
          right: 0;
        }
      }
      .el-form-item {
        .el-form-item__content {
          .hmmm {
            position: absolute;
            right: 10px;
            top: 2px;
          }
        }
      }
      .el-button {
        width: 100%;
      }
    }
  }
}
</style>
